<script setup>
import { onMounted, ref, shallowRef } from "vue";
import emitter from "@/utils/mitt.js";
import { getList } from "@/api/article.js";

const props = defineProps({
	title: {
		type: String,
		default: () => {
			return "";
		},
	},
	limit: {
		type: Number,
		default: () => {
			return 7;
		},
	},
});

const changePath = () => {
	emitter.emit("changePath", {
		path: "/index/download",
	});
};

const listData = ref([]);

const getListData = async () => {
	const res = await getList({
		pageNum: 1,
		pageSize: props.limit,
		isView: 1,
	});
	try {
		if (res.data.code === 200) {
			listData.value = res.data.data.records;
			console.log(listData.value, "listData.value");
		} else {
			console.log(res.data.msg);
		}
	} catch (e) {
		console.log(e);
	}
};
const addZero = (num) => `${num < 10 ? "0" : ""}${num}`;

const splitTime = (time) => {
	// 将YYYY-MM-DD格式转换为{year: YYYY, month: MM, day: DD}
	const timestamp = Date.parse(time);
	// 如果timestamp为NaN则返回''
	if (!timestamp) return "";
	const newTime = new Date(timestamp);
	return {
		year: addZero(newTime.getFullYear()),
		month: addZero(newTime.getMonth() + 1),
		day: addZero(newTime.getDate()),
	};
};

onMounted(async () => {
	await getListData();
});
</script>

<template>
	<div>
		<div class="mainTitle flex flex_between align_itemsCenter">
			<span class="mainTitleSpan">
				{{ props.title }}
			</span>
			<n-button text :color="'#c72003'" @click="changePath(props.path)"> 更多+ </n-button>
		</div>
		<div class="listItem" v-for="(item, index) in listData" :key="index" @click="changePath(detailsUrl, { id: item.id })" style="cursor: pointer">
			<n-space justify="space-between" align="center" :wrap="false">
				<em v-if="props.type === 'rect'" class="em"></em>
				<div v-else :class="index < 3 ? 'numLatest' : 'numOther'">
					{{ index + 1 }}
				</div>
				<n-ellipsis class="articleTitle" :tooltip="false" style="width: 300px; font-size: 16px">
					{{ item.title }}
				</n-ellipsis>
				<div style="width: 80px; color: #aaaaaa">
					{{ splitTime(item.createTime).year + "-" + splitTime(item.createTime).month + "-" + splitTime(item.createTime).day }}
				</div>
			</n-space>
			<n-divider dashed style="margin: 0; background: #999999"></n-divider>
		</div>
	</div>
</template>

<style scoped>
.mainTitle {
	width: 100%;
	height: 33px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--primary-color);
}
.mainTitleSpan {
	display: block;
	float: left;
	overflow: hidden;
	width: 134px;
	font-size: 18px;
	padding-left: 10px;
	box-sizing: border-box;
	line-height: 33px;
	color: #fff;
	background: url("@/assets/img/content/mainPage/titleBg.png") no-repeat;
	background-size: 100% 100%;
}
.listItem {
	height: 35px;
	width: 100%;
}
.em {
	width: 4px;
	height: 4px;
	display: block;
	background-color: var(--primary-color);
}
.numLatest {
	background: var(--primary-color);
	color: #fff;
	height: 18px;
	width: 18px;
	text-align: center;
	line-height: 18px;
}
.numOther {
	background: #e8e8e8;
	height: 18px;
	width: 18px;
	text-align: center;
	line-height: 18px;
}
.articleTitle:hover {
	color: #0696ed;
}
</style>
